<template>
  <div class="shandong-map-container">
    <el-card class="map-card">
        <template #header>
        <div class="card-header">
          <h2>山东省地图</h2>
          <div class="map-controls">
            <el-button-group>
              <el-button 
                :type="mapType === 'normal' ? 'primary' : 'default'"
                @click="setMapType('normal')"
              >
                标准地图
              </el-button>
              -
              <el-button 
                :type="mapType === 'satellite' ? 'primary' : 'default'"
                @click="setMapType('satellite')"
              >
                卫星地图
              </el-button>
              <el-button 
                :type="mapType === 'hybrid' ? 'primary' : 'default'"
                @click="setMapType('hybrid')"
              >
                混合地图
              </el-button>
            </el-button-group>
            
            <!-- 地点搜索 -->
            <div class="search-container">
              <el-autocomplete
                v-model="searchKeyword"
                :fetch-suggestions="getSearchSuggestions"
                placeholder="搜索地点..."
                @select="handleSearchSelect"
                @keyup.enter="performSearch"
                clearable
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
                <template #default="{ item }">
                  <div class="search-suggestion">
                    <div class="suggestion-title">{{ item.title }}</div>
                    <div class="suggestion-address">{{ item.address }}</div>
                  </div>
        </template>
              </el-autocomplete>
              <el-button @click="performSearch" type="primary">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
          </div>
          
            <!-- 地图控制 -->
            <div class="map-actions">
              <el-button @click="resetMap">
                <el-icon><Refresh /></el-icon>
                重置视图
              </el-button>
              <el-button @click="toggleTraffic">
                <el-icon><Location /></el-icon>
                {{ showTraffic ? '关闭' : '开启' }}路况
              </el-button>
          </div>
          </div>
        </div>
      </template>
      
      <!-- 地图容器 -->
      <div class="map-wrapper">
        <div ref="mapContainer" class="map-container"></div>
        
        <!-- 地图信息面板 -->
        <div class="map-info-panel" v-if="selectedCity">
          <h3>{{ selectedCity.name }}</h3>
          <div class="city-info">
            <p><strong>人口：</strong>{{ selectedCity.population }}万人</p>
            <p><strong>面积：</strong>{{ selectedCity.area }}平方公里</p>
            <p><strong>GDP：</strong>{{ selectedCity.gdp }}亿元</p>
            <p><strong>特色：</strong>{{ selectedCity.features }}</p>
          </div>
          <el-button @click="selectedCity = null" size="small">关闭</el-button>
          </div>
          
        <!-- 地图加载状态 -->
        <div v-if="mapLoading" class="map-loading">
          <div class="loading-content">
            <el-icon class="is-loading"><Loading /></el-icon>
            <span>地图加载中...</span>
            <div class="loading-progress">
              <div class="progress-bar"></div>
            </div>
          </div>
        </div>
        
        <!-- 地图加载失败提示 -->
        <div v-if="!mapLoading && mapError" class="map-error">
          <div class="error-content">
            <el-icon><Warning /></el-icon>
            <h3>地图加载失败</h3>
            <p>{{ mapError }}</p>
            <div class="error-actions">
              <el-button @click="retryLoadMap" type="primary" size="small">
                <el-icon><Refresh /></el-icon>
                重试加载
              </el-button>
              <el-button @click="showStaticMap" type="default" size="small">
                <el-icon><Location /></el-icon>
                显示静态地图
              </el-button>
            </div>
          </div>
        </div>
        
        <!-- 静态地图 -->
        <div v-if="showStaticMapView" class="static-map">
          <div class="static-map-content">
            <h3>山东省地图</h3>
            <div class="static-map-image">
              <div class="map-placeholder">
                <el-icon><Location /></el-icon>
                <p>静态地图视图</p>
                <p>山东省主要城市分布</p>
              </div>
            </div>
            <div class="city-list-static">
              <div 
                v-for="city in cities" 
                :key="city.id"
                class="city-item-static"
                :class="{ active: selectedCity?.id === city.id }"
                @click="selectCity(city)"
              >
                <span class="city-name">{{ city.name }}</span>
                <span class="city-info">{{ city.population }}万人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 城市列表 -->
      <div class="city-list">
        <h3>山东省主要城市</h3>
        <div class="city-grid">
          <div 
            v-for="city in cities" 
            :key="city.id"
            class="city-item"
            :class="{ active: selectedCity?.id === city.id }"
            @click="selectCity(city)"
          >
            <div class="city-name">{{ city.name }}</div>
            <div class="city-population">{{ city.population }}万人</div>
          </div>
        </div>
      </div>
    </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { BAIDU_MAP_CONFIG, SHANDONG_CITIES, waitForBaiduMap } from '@/config/baidu-map'

// 城市数据类型
interface City {
  id: number
  name: string
  lng: number
  lat: number
  population: number
  area: number
  gdp: number
  features: string
}

// 百度地图相关类型声明
declare global {
  interface Window {
    BMap: any
  }
}

// 响应式数据
const mapContainer = ref<HTMLElement>()
const mapType = ref<'normal' | 'satellite' | 'hybrid'>('normal')
const selectedCity = ref<City | null>(null)
const mapLoading = ref(false)
const mapError = ref('')
const showStaticMapView = ref(false)
const showTraffic = ref(false)
const searchKeyword = ref('')
const searchResults = ref<any[]>([])

// 百度地图实例
let map: any = null
let markers: any[] = []
let trafficLayer: any = null
let localSearch: any = null

// 山东省主要城市数据
const cities = ref<City[]>(SHANDONG_CITIES)

// 地图缓存
let mapCache: any = null
let isMapInitialized = false


// 初始化百度地图（优化版本）
const initBaiduMap = async () => {
  if (!mapContainer.value) {
    console.error('地图容器未找到')
    return
  }
  
  try {
    mapLoading.value = true
    mapError.value = ''
    
    // 如果地图已初始化，直接使用缓存
    if (isMapInitialized && mapCache && mapContainer.value) {
      console.log('使用缓存的地图实例')
      map = mapCache
      // 检查容器是否已经包含地图
      if (!mapContainer.value.querySelector('.BMap_canvas')) {
        mapContainer.value.appendChild(map.getContainer())
      }
      addCityMarkers()
      mapLoading.value = false
      return
    }
    
    console.log('开始初始化百度地图...')
    
    // 等待百度地图API加载完成
    await waitForBaiduMap()
    
    // 检查百度地图API是否正确加载
    if (!window.BMap || !window.BMap.Map) {
      throw new Error('百度地图API加载失败')
    }
    
    console.log('百度地图API加载成功，开始创建地图实例')
    
    // 检查API密钥
    if (BAIDU_MAP_CONFIG.API_KEY === 'YOUR_BAIDU_MAP_AK') {
      ElMessage.warning('请先配置百度地图API密钥')
      mapLoading.value = false
      return
    }
    
    // 创建地图实例（优化配置）
    map = new window.BMap.Map(mapContainer.value, {
      enableMapClick: false, // 禁用地图点击事件，提升性能
      enableHighResolution: true, // 启用高分辨率
      enableAutoResize: true, // 启用自动调整大小
      enableScrollWheelZoom: true, // 启用滚轮缩放
      enableDoubleClickZoom: true, // 启用双击缩放
      enableKeyboard: true, // 启用键盘操作
      enableDragging: true, // 启用拖拽
      enableContinuousZoom: true, // 启用连续缩放
      enablePinchToZoom: true, // 启用双指缩放
      enableInertialDragging: true, // 启用惯性拖拽
      enableResize: true // 启用调整大小
    })
    
    // 设置地图中心点和缩放级别
    const center = new window.BMap.Point(BAIDU_MAP_CONFIG.DEFAULT_CENTER.lng, BAIDU_MAP_CONFIG.DEFAULT_CENTER.lat)
    map.centerAndZoom(center, BAIDU_MAP_CONFIG.DEFAULT_ZOOM)
    
    // 优化地图渲染性能
    map.setMapStyle({
      styleJson: [
        {
          "featureType": "water",
          "elementType": "all",
          "stylers": {
            "color": "#44b3d0"
          }
        },
        {
          "featureType": "land",
          "elementType": "all",
          "stylers": {
            "color": "#f2f2f2"
          }
        }
      ]
    })
    
    // 批量添加地图控件（提升性能）
    const controls = [
      new window.BMap.NavigationControl({ type: window.BMap.NavigationControlType.SMALL }),
      new window.BMap.ScaleControl({ anchor: window.BMap.ControlAnchor.BOTTOM_LEFT }),
      new window.BMap.OverviewMapControl({ isOpen: false }),
      new window.BMap.MapTypeControl({ mapTypes: [window.BMap.MapTypeId.NORMAL, window.BMap.MapTypeId.SATELLITE, window.BMap.MapTypeId.HYBRID] })
    ]
    
    controls.forEach(control => map.addControl(control))
    
    // 初始化搜索服务
    initSearchServices()
    
    // 使用requestAnimationFrame优化标记添加
    requestAnimationFrame(() => {
      addCityMarkers()
    })
    
    // 设置地图类型
    setMapType('normal')
    
    // 缓存地图实例
    mapCache = map
    isMapInitialized = true
    
    ElMessage.success('地图加载成功')
    
  } catch (error) {
    console.error('地图初始化失败:', error)
    
    // 设置错误状态
    let errorMessage = '地图加载失败，请检查网络连接'
    
    if (error instanceof Error) {
      if (error.message.includes('超时')) {
        errorMessage = '地图加载超时，请检查网络连接或API密钥配置'
      } else if (error.message.includes('API加载失败')) {
        errorMessage = '百度地图API加载失败，请刷新页面重试'
      } else {
        errorMessage = '地图加载失败：' + error.message
      }
    }
    
    mapError.value = errorMessage
    
    // 显示错误提示
    ElMessage.error(errorMessage)
    
    // 显示备用提示
    setTimeout(() => {
      ElMessage.info('如果问题持续存在，请检查百度地图API密钥配置或网络连接')
    }, 2000)
    
    // 自动降级到静态地图
    setTimeout(() => {
      if (!isMapInitialized) {
        console.log('自动降级到静态地图')
        showStaticMap()
      }
    }, 3000)
    
  } finally {
    mapLoading.value = false
  }
}

// 初始化搜索服务
const initSearchServices = () => {
  if (!map) return
  
  // 初始化本地搜索
  localSearch = new window.BMap.LocalSearch(map, {
    onSearchComplete: (results: any) => {
      if (localSearch.getStatus() === window.BMap.Status.OK) {
        searchResults.value = results.vr || []
      }
    }
  })
  
}

// 标记点缓存
let markersCache: any[] = []
let isMarkersLoaded = false

// 添加城市标记（高性能版本）
const addCityMarkers = () => {
  if (!map) return
  
  // 如果标记已加载，直接使用缓存
  if (isMarkersLoaded && markersCache.length > 0) {
    markersCache.forEach(marker => map.addOverlay(marker))
    markers = [...markersCache]
    return
  }
  
  // 清除现有标记
  markers.forEach(marker => map.removeOverlay(marker))
  markers = []
  
  // 分片加载标记（提升性能）
  const batchSize = 5 // 每批加载5个标记
  let currentIndex = 0
  
  const loadMarkersBatch = () => {
    const endIndex = Math.min(currentIndex + batchSize, cities.value.length)
    
    for (let i = currentIndex; i < endIndex; i++) {
      const city = cities.value[i]
      const point = new window.BMap.Point(city.lng, city.lat)
      
      // 创建轻量级标记
      const marker = new window.BMap.Marker(point, {
        enableMassClear: true,
        enableDragging: false,
        enableClicking: true,
        enableAutoResize: false // 禁用自动调整大小
      })
      
      // 创建信息窗口（延迟创建）
      const createInfoWindow = () => {
        return new window.BMap.InfoWindow(`
          <div style="padding: 10px; min-width: 200px;">
            <h3 style="margin: 0 0 10px 0; color: #333;">${city.name}</h3>
            <p style="margin: 5px 0;"><strong>人口：</strong>${city.population}万人</p>
            <p style="margin: 5px 0;"><strong>面积：</strong>${city.area}平方公里</p>
            <p style="margin: 5px 0;"><strong>GDP：</strong>${city.gdp}亿元</p>
            <p style="margin: 5px 0;"><strong>特色：</strong>${city.features}</p>
          </div>
        `)
      }
      
      // 添加点击事件（使用事件委托优化性能）
      marker.addEventListener('click', () => {
        selectedCity.value = city
        const infoWindow = createInfoWindow()
        map.openInfoWindow(infoWindow, point)
      })
      
      // 添加到地图
      map.addOverlay(marker)
      markers.push(marker)
    }
    
    currentIndex = endIndex
    
    // 如果还有更多标记，继续加载
    if (currentIndex < cities.value.length) {
      requestAnimationFrame(loadMarkersBatch)
    } else {
      // 所有标记加载完成
      markersCache = [...markers]
      isMarkersLoaded = true
      
      // 设置地图视野以包含所有标记
      if (markers.length > 0) {
        const points = cities.value.map(city => new window.BMap.Point(city.lng, city.lat))
        map.setViewport(points)
      }
    }
  }
  
  // 开始分片加载
  loadMarkersBatch()
}

// 设置地图类型
const setMapType = (type: 'normal' | 'satellite' | 'hybrid') => {
  if (!map) return
  
  mapType.value = type
  
  switch (type) {
    case 'normal':
      map.setMapType(window.BMap.MapTypeId.NORMAL)
      break
    case 'satellite':
      map.setMapType(window.BMap.MapTypeId.SATELLITE)
      break
    case 'hybrid':
      map.setMapType(window.BMap.MapTypeId.HYBRID)
      break
  }
}

// 重置地图
const resetMap = () => {
  if (!map) return
  
  selectedCity.value = null
  const center = new window.BMap.Point(BAIDU_MAP_CONFIG.DEFAULT_CENTER.lng, BAIDU_MAP_CONFIG.DEFAULT_CENTER.lat)
  map.centerAndZoom(center, BAIDU_MAP_CONFIG.DEFAULT_ZOOM)
  setMapType('normal')
}

// 切换路况显示
const toggleTraffic = () => {
  if (!map) return
  
  if (showTraffic.value) {
    // 关闭路况
    if (trafficLayer) {
      map.removeTileLayer(trafficLayer)
      trafficLayer = null
    }
    showTraffic.value = false
  } else {
    // 开启路况
    trafficLayer = new window.BMap.TrafficLayer()
    map.addTileLayer(trafficLayer)
    showTraffic.value = true
  }
}

// 搜索缓存
const searchCache = new Map<string, any[]>()
let searchTimeout: ReturnType<typeof setTimeout> | null = null

// 搜索建议（优化版本）
const getSearchSuggestions = (queryString: string, callback: (suggestions: any[]) => void) => {
  if (!queryString || queryString.length < 2) {
    callback([])
    return
  }
  
  // 检查缓存
  if (searchCache.has(queryString)) {
    callback(searchCache.get(queryString)!)
    return
  }
  
  // 本地城市搜索建议（优先返回）
  const localSuggestions = cities.value
    .filter(city => city.name.includes(queryString))
    .map(city => ({
      value: city.name,
      title: city.name,
      address: `${city.name}市`,
      point: new window.BMap.Point(city.lng, city.lat)
    }))
  
  // 如果本地搜索有结果，直接返回并缓存
  if (localSuggestions.length > 0) {
    searchCache.set(queryString, localSuggestions)
    callback(localSuggestions)
    return
  }
  
  // 防抖处理，避免频繁请求
  if (searchTimeout) {
    clearTimeout(searchTimeout)
  }
  
  searchTimeout = setTimeout(() => {
    // 使用百度地图搜索建议
    if (localSearch) {
      localSearch.search(queryString)
      // 延迟返回结果，避免频繁请求
      setTimeout(() => {
        const suggestions = searchResults.value.map((result: any) => ({
          value: result.title,
          title: result.title,
          address: result.address,
          point: result.point
        }))
        // 缓存结果
        searchCache.set(queryString, suggestions)
        callback(suggestions)
      }, 200) // 减少延迟时间
    } else {
      callback([])
    }
  }, 150) // 减少防抖延迟
}

// 处理搜索选择
const handleSearchSelect = (item: any) => {
  if (item.point) {
    // 定位到选中地点
    map.panTo(item.point)
    map.setZoom(15)
    
    // 创建标记
    const marker = new window.BMap.Marker(item.point)
    map.addOverlay(marker)
    
    // 创建信息窗口
    const infoWindow = new window.BMap.InfoWindow(`
      <div style="padding: 10px; min-width: 200px;">
        <h3 style="margin: 0 0 10px 0; color: #333;">${item.title}</h3>
        <p style="margin: 5px 0; color: #666;">${item.address}</p>
      </div>
    `)
    map.openInfoWindow(infoWindow, item.point)
    
    // 3秒后移除临时标记
    setTimeout(() => {
      map.removeOverlay(marker)
    }, 3000)
  }
}

// 执行搜索
const performSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  if (!localSearch) {
    ElMessage.error('搜索服务未初始化')
    return
  }
  
  // 执行搜索
  localSearch.search(searchKeyword.value)
  
  // 监听搜索完成
  localSearch.setSearchCompleteCallback((results: any) => {
    if (localSearch.getStatus() === window.BMap.Status.OK) {
      const searchResults = results.vr || []
      if (searchResults.length > 0) {
        // 显示第一个结果
        const firstResult = searchResults[0]
        const point = firstResult.point
        map.panTo(point)
        map.setZoom(15)
        
        // 创建标记
        const marker = new window.BMap.Marker(point)
        map.addOverlay(marker)
        
        // 创建信息窗口
        const infoWindow = new window.BMap.InfoWindow(`
          <div style="padding: 10px; min-width: 200px;">
            <h3 style="margin: 0 0 10px 0; color: #333;">${firstResult.title}</h3>
            <p style="margin: 5px 0; color: #666;">${firstResult.address}</p>
          </div>
        `)
        map.openInfoWindow(infoWindow, point)
        
        ElMessage.success(`找到 ${searchResults.length} 个相关地点`)
      } else {
        ElMessage.warning('未找到相关地点')
      }
    } else {
      ElMessage.error('搜索失败，请重试')
    }
  })
}

// 选择城市
const selectCity = (city: City) => {
  if (!map) return
  
  selectedCity.value = city
  
  // 定位到选中城市
  const point = new window.BMap.Point(city.lng, city.lat)
  map.panTo(point)
  map.setZoom(12) // 放大到城市级别
  
  // 打开信息窗口
  const infoWindow = new window.BMap.InfoWindow(`
    <div style="padding: 10px; min-width: 200px;">
      <h3 style="margin: 0 0 10px 0; color: #333;">${city.name}</h3>
      <p style="margin: 5px 0;"><strong>人口：</strong>${city.population}万人</p>
      <p style="margin: 5px 0;"><strong>面积：</strong>${city.area}平方公里</p>
      <p style="margin: 5px 0;"><strong>GDP：</strong>${city.gdp}亿元</p>
      <p style="margin: 5px 0;"><strong>特色：</strong>${city.features}</p>
    </div>
  `)
  map.openInfoWindow(infoWindow, point)
}

// 重试加载地图
const retryLoadMap = () => {
  mapError.value = ''
  showStaticMapView.value = false
  mapLoading.value = true
  nextTick(() => {
    initBaiduMap()
  })
}

// 显示静态地图
const showStaticMap = () => {
  showStaticMapView.value = true
  mapError.value = ''
  mapLoading.value = false
}

// 组件挂载时初始化地图
onMounted(() => {
  nextTick(() => {
    // 延迟一点时间确保DOM完全渲染
    setTimeout(() => {
      initBaiduMap()
    }, 100)
  })
})

// 组件卸载时清理
onUnmounted(() => {
  // 清理定时器
  if (searchTimeout) {
    clearTimeout(searchTimeout)
    searchTimeout = null
  }
  
  // 清理地图
  if (map) {
    map.clearOverlays()
    map = null
  }
  
  // 清理缓存
  searchCache.clear()
  markersCache = []
  isMarkersLoaded = false
  isMapInitialized = false
})
</script>

<style scoped>
.shandong-map-container {
  padding: 20px;
}

.map-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.card-header h2 {
  margin: 0;
  color: #333;
}

.map-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.search-suggestion {
  padding: 8px 0;
}

.suggestion-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.suggestion-address {
  font-size: 12px;
  color: #666;
}

.map-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.map-container {
  width: 100%;
  height: 500px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
  position: relative;
  overflow: hidden;
}

.map-info-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 10;
}

.map-info-panel h3 {
  margin: 0 0 15px 0;
  color: #333;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 5px;
}

.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  min-width: 200px;
}

.loading-content .el-icon {
  font-size: 32px;
  color: #409EFF;
  animation: spin 1s linear infinite;
}

.loading-content span {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.loading-progress {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  border-radius: 2px;
  animation: progress 2s ease-in-out infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.map-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  min-width: 300px;
  text-align: center;
}

.error-content .el-icon {
  font-size: 48px;
  color: #f56c6c;
}

.error-content h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.error-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.error-content .el-button {
  margin-top: 10px;
}

.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 15px;
}

.static-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f5f5;
  z-index: 100;
}

.static-map-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.static-map-content h3 {
  margin: 0 0 20px 0;
  color: #333;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}

.static-map-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.map-placeholder {
  text-align: center;
  color: white;
}

.map-placeholder .el-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.map-placeholder p {
  margin: 10px 0;
  font-size: 18px;
  font-weight: 500;
}

.map-placeholder p:last-child {
  font-size: 14px;
  opacity: 0.8;
}

.city-list-static {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.city-item-static {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.city-item-static:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.city-item-static.active {
  border-color: #409EFF;
  background: #f0f9ff;
}

.city-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.city-info {
  color: #666;
  font-size: 12px;
}

.city-info p {
  margin: 8px 0;
  color: #666;
  line-height: 1.6;
}

.city-list {
  margin-top: 20px;
}

.city-list h3 {
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 5px;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.city-item {
  background: white;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.city-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  transform: translateY(-2px);
}

.city-item.active {
  border-color: #ff6b6b;
  background: #fff5f5;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.city-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.city-population {
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .map-controls {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .search-container {
    order: 1;
    width: 100%;
    margin-bottom: 10px;
  }
  
  .map-actions {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  
  .map-container {
    height: 400px;
  }
  
  .map-info-panel {
    position: static;
    margin-top: 15px;
    width: 100%;
  }
  
  .city-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .shandong-map-container {
    padding: 10px;
  }
  
  .map-container {
    height: 300px;
  }
  
  .city-grid {
    grid-template-columns: 1fr;
  }
}
</style>
